<template>
  <view class="index-root" :style="fullStyle">
    <view class="header">
      <view class="login-title-container">
        {{ titleText }}
      </view>
      <image src="../../static/image/loninBackImg.png"></image>
    </view>
    <view class="body">
      <div class="icon-button" v-for="item in list" :key="item.url">
        <image :src="item.src" class="icon"></image>
        <navigator :url="item.url" hover-class="navigator-hover">
          <u-button size="small" type="default">{{ item.name }}</u-button>
        </navigator>
      </div>
    </view>
  </view>
</template>

<script>
import { baseMixins } from "@/mixins/baseMixins";
export default {
  mixins: [baseMixins],
  methods: {
    navigateToPage(pagePath) {
      uni.redirectTo({
        url: pagePath,
      });
    },
  },
  data() {
    return {
      titleText: "兴安盟农业保险",
      list: [
        {
          name: "报案管理",
          url: "/pages/reportCase/index",
          src: "../../static/image/opinion_default.png",
        },
        {
          name: "承保信息",
          url: "/pages/underwrite/index",
          src: "../../static/image/opinion_default.png",
        },
        {
          name: "保险数据",
          url: "/pages/insurance/index",
          src: "../../static/image/opinion_default.png",
        },
        {
          name: "通知公告",
          url: "/pages/notification/index",
          src: "../../static/image/opinion_default.png",
        },
        {
          name: "现场验标",
          url: "/pages/onsiteInspection/index",
          src: "../../static/image/opinion_default.png",
        },
      ],
    };
  },
};
</script>

<style>
.login-title-container {
  position: absolute;
  top: 100rpx;
  width: 750rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
  font-size: 45rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #d3ffd2;
  text-shadow: 0rpx 1rpx 0rpx #000000;
}

.header {
  width: 750rpx;
  height: 400rpx;
  position: relative;
  /* 		background: rgba(63, 205, 235, 1);
  box-shadow: 0rpx 12rpx 13rpx 0rpx rgba(63, 205, 235, 0.47); */
  /* border-radius: 50%; */
}

.header image {
  width: 750rpx;
  height: 400rpx;
}
.home-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20px;
}

.body {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 20px;
  margin-top: 20px;
}

.icon-button {
  width: 170rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  background-color: #fff;
}

.icon-button ::v-deep .u-button {
  padding: 0 !important;
  width: 100%;
}

.icon {
  width: 40rpx;
  height: 40rpx;
  margin: 10px 0;
}
</style>
